<template>
  <div>
    <el-upload
        class="avatar-uploader-img"
        :action="fileUploadApi"
        :show-file-list="false"
        :headers="headers"
        :on-success="uploadImgSuccess"
        :before-upload="beforeUploadImg"
        :on-error="uploadImgError"
        :data="{'pathName':''}"
    />
    <el-upload
        class="avatar-uploader-video"
        :action="fileUploadApi"
        :show-file-list="false"
        :headers="headers"
        :on-success="uploadVideoSuccess"
        :before-upload="beforeUploadVideo"
        :on-error="uploadVideoError"
        :data="{'pathName':''}"
    />
  </div>
</template>

<script>
export default {
  name: 'upload',
  data(){
    return{
      beforeUploadImg(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG，PNG, GIF 格式!')
        } else {
          // 显示loading动画
          this.quillUpdate = true
        }
        return isJPG
      },
      // 富文本视频上传前
      beforeUploadVideo(file) {
        const isVideo = file.type === 'video/mp4'
        if (!isVideo) {
          this.$message.error('上传视频只能是 mp4 格式!')
        } else {
          // 显示loading动画
          this.quillUpdate = true
        }
        return isVideo
      },
      // 上传成功
      uploadImgSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        const quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.code == '200' && res.data.url != null) {
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.data.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdate = false
      },
      uploadVideoSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        const quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.code == '200' && res.data.url != null) {
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'video', res.data.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('视频插入失败')
        }
        // loading动画消失
        this.quillUpdate = false
      },
      // 上传失败
      uploadImgError() {
        // loading动画消失
        this.quillUpdate = false
        this.$message.error('图片插入失败')
      },
      uploadVideoError() {
        // loading动画消失
        this.quillUpdate = false
        this.$message.error('视频插入失败')
      }
    }
  }
}
</script>

<style scoped>

</style>
